<template>
  <div class="gaishangpin">
    <el-dialog title="修改商品" :visible.sync="fixprolog" width="450px" :close-on-click-modal="false">
        <div class="kflexc" style="margin-bottom: 20px;">
          <div style="margin-right: 10px;">通过商品名称修改:</div>
          <div> 
            <el-select v-model="fixproname" :reserve-keyword="true" style="width: 250px;" clearable :disabled="fixpronameshow" @input="searchproname"	filterable placeholder="请选择">
            	<el-option v-for="item in allprolist" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div style="margin-right: 10px;">通过商品编码修改:</div>
          <div>
            <el-input v-model="fixprocode"  style="width: 250px;" :disabled="fixprocodeshow" @input="searchprocode" placeholder="输入商品编码"></el-input>
          </div>
        </div>
        <div style="margin-bottom: 20px;">查询结果:  {{fixpronames}}</div>
    	<div slot="footer" class="dialog-footer">
    		<el-button @click="fixprolog = false" round>取 消</el-button>
    		<el-button type="danger" @click="fixprook()" :loading="fixproing" round style="background-color: #2974FF;">确 定</el-button>
    	</div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: "gaishangpin",
    props:['id'],
    data() {
      return {
        fixprolog:false,
        fixpronameshow:false,
        fixproname:"",
        allprolist:"",
        fixprocode:"",
        fixprocodeshow:false,
        fixpronames:"",
        fixproing:false
      };
    },
    created() {
      //获取所有产品
      axios.get("/api/plan-market/all-pages?_page=1&_page_size=1000")
      	.then(response=> {
      		if (response.data.msg.code == 0) {
      			this.allprolist = response.data.data
      		}
      	})
    },
    methods: {

      //修改产品查询
      searchproname: function() {
      	if (this.fixproname == "") {
      		this.fixprocodeshow = false;
      	} else {
      		this.fixprocodeshow = true;
      	}
      	this.fixproid = this.fixproname;
		  this.fixpronames = "";
      },
      searchprocode: function() {
      	if (this.fixprocode == "") {
      		this.fixpronameshow = false;
      	} else {
      		this.fixpronameshow = true;
      	}
      	this.fixpronames = "查询中...";
      	axios.get("/api/plan-market/order-page/my?fetch_code=" + encodeURIComponent(this.fixprocode))
      		.then(response => {
      			if (response.data.msg.code != 0) {
      				this.$message.error(response.data.msg.info);
      			} else {
      				if (response.data.data == null) {
      					this.fixpronames = "没有查询到商品";
      					this.fixproid = "";
      				} else {
      					this.fixproid = response.data.data.id;
      					this.fixpronames = response.data.data.title;
      				}
      			}
      		});
      },
      //修改商品ok
      fixprook: function() {
      	this.fixproing = true;
      	var that = this;
      	axios.post("/api/plan-market/order/product/update", {
      			page_id: this.fixproid,
      			ids: this.id
      		})
      		.then(response => {
      			if (response.data.msg.code != 0) {
      				that.$message.error(response.data.msg.info);
      				that.fixproing = false;
      			} else {
      				if (response.data.data.error == "") {
      					that.fixproing = false;
      					that.$message({
      						message: "修改商品成功",
      						type: "success"
      					});
      					that.fixprolog = false;
                that.$emit('xiugaishangpinwan')
      				} else {
      					for (let i in response.data.data.error) {
      						that.$message.error(response.data.data.error[i]);
      					}
      					that.fixproing = false;
      					that.fixprolog = false;
                that.$emit('xiugaishangpinwan')
      				}
      			}
      		});
      },
    }
  };
</script>

<style  scoped>
  .kflexc {
	display: flex;
  }
  /deep/ .el-input--suffix .el-input__inner  {
      background-color: #f7f8fa;
      border: none;
    }
    /deep/ .el-range-editor.el-input__inner{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/ .el-date-editor .el-range-input{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/ .el-input__inner{
      background-color: #f7f8fa;
      border: none;
      
    }
</style>
